<template>
  <div style="padding-top: 10px">
    <el-table
      :data="tableData"
      border
      style="width: 100%; margin-bottom: 10px; padding: 20px"
      row-key="id"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="姓名" sortable> </el-table-column>
      <el-table-column prop="Gender" label="性别" sortable> </el-table-column>

      <el-table-column prop="fansNum" label="粉丝" sortable></el-table-column>
      <el-table-column  label="操作" sortable >
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.$index)" type="primary" size="small"
            >查看</el-button
          >
          <el-button v-if="scope.row.type=='关注'"  type="primary" @click="changeStatu(scope.row, scope.$index)" size="small">关注</el-button>
   <el-button v-if="scope.row.type!=='关注'"  type="danger" @click="changeStatu(scope.row, scope.$index)" size="small">取消关注</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer title="个人主页" :visible.sync="drawer" :with-header="false">
      <h5>{{ tableData[selectedTeacher].name }}的个人主页</h5>
      <hr />
      <div class="resume_list">
        <img src="../../assets/ZBJ.jpg" alt="头像" />
        <div id="Name">
          <span>姓名:{{ tableData[selectedTeacher].name }}</span>
        </div>
        <div id="fans">
          <span>粉丝：{{ tableData[selectedTeacher].fansNum }}</span>
        </div>
        <hr />
      </div>
      <div class="courses">所授课程:
         <el-table
    :data=" tableData[selectedTeacher].inCourseList"
    stripe
    style="width: 100%">
    <el-table-column
      prop="name"
      label="课程名称"
      >
    </el-table-column>
    <el-table-column
      prop="peopleNumber"
      label="参与人数"
       width="90%">
    </el-table-column>
   
  </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { taechers, schools,courses } from "../../../public/schoolData.js";

export default {
  name: "table1",
  data() { 
    return {
      studentId: JSON.parse(sessionStorage.getItem("studentInfo")).studentId,
      tableData: taechers,
      drawer: false,
      followTeachers: [],
      direction: "rtl",
      selectedTeacher:0,
    };
  },
  created() {
    this.followTeachers = schools.find((data) => {
      return data.id == this.studentId;
    }).followTeachers;
    this.tableData = this.tableData.map((element) => {
      if (this.followTeachers.length > 0) {
        let queryResult = this.followTeachers.some((data) => {
          return element.id == data.id;
        });
        if (queryResult) {
          element.type = "取消关注";
        } else {
          element.type = "关注";
        }
      } else {
        element.type = "关注";
      }
      return element;
    });
  },
  methods: {
    handleClick(index) {
      this.selectedTeacher=index;
      this.drawer = true;
    },
    changeStatu(teacher) {
      if (teacher.type == "关注") {
        teacher.type = "取消关注";
      
        teacher.fansNum++;
        schools
          .find((data) => {
            return data.id == this.studentId;
          })
          .followTeachers.push({
            id: row.id,
            name: row.name,
            Gender: row.Gender,
            fansNum: num,
          });
      } else {
        teacher.type = '关注';
        teacher.fansNum--;
        let indexDel = this.followTeachers.find((data) => {
          return data.id == row.id;
        });
        schools
          .find((data) => {
            return data.id == this.studentId;
          })
          .followTeachers.splice(indexDel, 1);
        row.type = "关注";
      }
    },
  },
};
</script>

<style scoped>
/* h5 {
  margin: -50px;
} */
.resume_list {
  list-style: none;
  /* position: relative; */
  background-color: rgba(211, 187, 243, 0.096);
  /* width: 170px; */
  /* height: 260px; */
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  line-height: 50px;
}

.resume_list > img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: solid 2px white;
  box-shadow: 0px 0px 15px 3px rgba(236, 203, 111, 0.452);
  cursor: pointer;
}

hr {
  width: 90%;
}
.resume_list > #Name > span {
  color: rgb(49, 46, 46);
  font-size: 20px;
  cursor: pointer;
}

.resume_list > #fans > span {
  color: rgb(131, 124, 124);
  font-size: 16px;
  cursor: pointer;
}
.courses {
  text-align: left;
  line-height: 30px;
  font-size: 20px;
}
</style>
